<template>
	<div>

		<div class="item-view" v-for="(item,index) in noticeList" :key="index">

			<div class="item-top">
				<span class="item-title">{{item.title}}</span>
				<span class="item-datetext">2021-07-26 09:00</span>
			</div>

			<div class="item-bottom">
				<span class="item-contenttext">{{item.content}}</span>
			</div>

			<div class="btn_bottom">
				<el-button type="danger" size="small" @click="remove(item._id)">删除</el-button>
			</div>


		</div>
	</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				noticeList: []
			}
		},
		methods: {
			async fetch() {
				const res = await this.http.get("admin/notices/list");
				this.noticeList = res.data.list;
			},
			async remove(_id) {
				this.$confirm(`是否删除该公告?`, "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(async () => {
						const res = await this.http.post(`admin/notices/list/${_id}`)
						this.$message({
							type: "success",
							message: "删除成功!"
						});
						this.fetch();
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			}
		},
		mounted() {
			this.fetch();
		}
	}
</script>

<style lang="scss" scoped>
	.item-view {
		display: flex;
		flex-direction: column;
		padding: 15px;
		justify-content: center;
		background-color: #fff;
		border-radius: 5px;
		margin-left: 8px;
		margin-right: 8px;
		margin-top: 8px;

		.item-top {
			padding-bottom: 20px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: #eeeeee solid 1px;

			.item-title {
				font-size: 15px;
				color: #333;
			}

			.item-datetext {
				width: auto;
				text-align: center;
				font-size: 12px;
				color: #999;
			}
		}

		.item-bottom {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin-top: 20px;

			.item-contenttext {
				font-size: 14px;
				color: #333;
				padding-bottom: 15px;
			}


		}

		.btn_bottom {
			width: 60px;
			margin-left: auto;
		}


	}
</style>
